<template>
 <div>
   <el-container>
    <el-header height="">
      <img :src="logo" alt="">
      <span>随堂问卷</span>
      <el-button type="text" @click="logout()">注销</el-button>
    </el-header>
  <el-container>
    <el-aside width="200px">
      <!-- :router="true"导航 -->
    <el-menu mode="vertical" :router="true">
      <template v-for="menu in menus">
         <el-menu-item v-if="menu.children.length==0" :index="menu.router" :key="menu.id+'abc'" >
          <i :class="menu.icon"></i>{{menu.menu_name}}
        </el-menu-item>
         <el-submenu v-else :index="menu.id+'abc'" :key="menu.id+'abc'">
        <template #title><i :class="menu.icon"></i>{{menu.menu_name}}</template>
         <el-menu-item :index="smenu.menu_name" v-for="smenu in menu.children" :key="smenu.id+'abb'">
          <i :class="smenu.icon"></i>{{smenu.menu_name}}
        </el-menu-item>
         </el-submenu>
      </template>
      <!-- <el-submenu index="1">
        <template #title>操作</template>  -->
        <!-- <el-menu-item index="/home/users">
          用户管理
        </el-menu-item> -->
        <!-- <el-menu-item index="/home/menus">
          菜单管理
        </el-menu-item>
        <el-menu-item index="3">
        问卷管理
        </el-menu-item> 
      </el-submenu> -->
    </el-menu>
    </el-aside>
     <el-main>
      <router-view></router-view>
     </el-main>
  </el-container>
</el-container>
 </div>
</template>

<script>
import logo from "../assets/logo.png";
export default {
  data() {
    return {
      logo,menus:[],
    };
  },
  beforeRouteEnter(to, form, next) {
    next(vm => {
      vm.isLogin(0, "/login");
    });
  },
  created(){
    this.getMenus();

    //一旦菜单状态发生变化，重新刷新
    this.$root.$on('changeStatus',()=>{
      this.getMenus();
    });
  },
  methods: {
     async getMenus() {
      this.loading = true;
      const { data: { data } } = await this.axios({
        method: "get",
        url: "/menus",
        params:{
          status:'1',
        }
      });
      this.menus = data;
      this.loading = false;
    },
    async logout() {
      // 注销，注销完成跳转登陆页面
      this.axios({
        url: "/users/logout"
      });
      this.$router.push({
        //跳转页面
        path: "/login"
      });
    },
    // async isLogin() {
    //   const { data: { data } } = await this.axios({
    //     url: "/users/islogin"
    //   });
    //   if (data == 0) {
    //     this.$router.push({
    //       path: "/login"
    //     });
    //   }
    // },
    getUsers() {
      this.axios({
        url: "/users"
      });
    }
  }
};
</script>


